<template>
  <div>
    <!-- <div class="card-item" style="height: 440px;">
      <p class="card-title">主要客源国家分析</p>
      <div class="card-div">
        <country ref="countrySource"></country>
      </div>
    </div> -->

    <div class="card-item" style="height: 440px;">
      <p class="card-title">主要客源省份分析</p>
      <div class="card-div">
        <province ref="provinceSource"></province>
      </div>
    </div>

    <div class="card-item" style="height: 440px; margin-top: 20px;">
      <p class="card-title">省内主要客源城市分析</p>
      <div class="card-div">
        <city ref="citySource"></city>
      </div>
    </div>

    <div class="card-item" style="height: 440px; margin-top: 20px;">
      <p class="card-title">游客APP使用类型分析</p>
      <div class="card-div">
        <tourist-app></tourist-app>
      </div>
    </div>
  </div>
</template>

<script>
  import Country from "./country.vue";
  import Province from "./province.vue";
  import City from "./city.vue";
  import TouristApp from '@/views/humanistic-tourism/tourist-style/tourist-app.vue';
export default {
  components: {
    Country,
    Province,
    City,
    TouristApp
  },
  data() {
    return {

    }
  },
  mounted() {
    // this.$refs.countrySource.initChart();
  },
  methods: {
  }
};

</script>

<style scoped lang="scss" type="text/scss">
.card-item {
  width: 100% !important;
  > .card-div {
    height: 386px;
  }
}
</style>
